<template>
  <div>
    <div id="setting" class="setting">
      <div class="headerNav" style="display: none;">
        <div class="navBar" style="background: rgb(255, 255, 255);">
          <i
            class="goBack"
            style="background-image: url(&quot;//img05.yiguoimg.com/d/web/190109/00281/094952/goback.png&quot;);"
          ></i>
          <p class="title" style="color: rgb(51, 51, 51);">设置</p>
          <!---->
        </div>
      </div>
      <div class="list line-bottom">
        <a href="tel:4000007788" class="listIn line-top">
          <span class="hot">客服热线</span>
          <span class="iphone">
            400-000-7788
            <i></i>
          </span>
        </a>
        <!---->
      </div>
      <div class="list line-bottom">
        <p class="listIn line-top">
          <span class="hot">修改登录密码</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">设置支付密码</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top phoneNum">
          <span class="hot">更换手机号码</span>
          <span class="number"></span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
      </div>
      <div class="list line-bottom padleft">
        <p class="listIn line-top">
          <span class="hot">关于我们</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">营业资质</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">服务协议</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">隐私条款</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">配送说明</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
        <p class="listIn line-top">
          <span class="hot">退换货说明</span>
          <span class="iphone">
            <i></i>
          </span>
        </p>
      </div>
      <div class="btn">
        <a class="loginbut" href="javascript:;" @click="loginout" v-if="token">退出登录</a>
      </div>
      <div class="maskHint" style="display: none;">
        <div class="popup-hint">
          <p class="hint-text">为了您的账号和资金安全，请您到易果APP上绑定或更换手机</p>
          <div class="btnpop1 clear">
            <a href="javascript:;" class="btnone">知道了</a>
            <a href="javascript:;" class="btntwo">下载APP</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logOut, getToken } from "@/utils/token.js";
export default {
  data() {
    return {
      token: ""
    };
  },

  components: {},

  methods: {
    loginout() {
      logOut();
      this.$store.dispatch("username");
      this.$notify({ type: "success", message: "退出成功！" });
      this.$router.push({ path: "/my" });
    }
  },
  created() {
    this.token = getToken();
  }
};
</script>

<style lang="scss" scope>
body {
  background: #f4f4f4;
  color: #000;
  font: 0.36rem/1 Arial, Helvetica, \534e\6587\7ec6\9ed1, sans-serif;
}
.setting .list {
  position: relative;
  background: #fff;
  margin-bottom: 0.566123rem;
  .listIn {
    position: relative;
    padding: 0.792575rem;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
  }
  .hot {
    font-size: 0.717087rem;
    color: #333;
    float: left;
  }
  .number {
    font-size: 0.717087rem;
    color: #333;
    position: absolute;
    right: 1.887075rem;
  }
  .iphone {
    position: relative;
    font-size: 0.717087rem;
    color: #11b57c;
    float: right;
    padding-right: 0.943538rem;
    i {
      position: absolute;
      right: 0;
      top: 0.094354rem;
      display: inline-block;
      width: 0.471354rem;
      height: 0.848956rem;
      background: url(//img05.yiguoimg.com/d/web/180313/01318/155922/gopage2.png)
        no-repeat;
      background-size: 100% 100%;
    }
  }
  .padleft {
    padding-left: 0.603865rem;
    box-sizing: border-box;
  }
}

.line-top:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.btn {
  .loginbut {
    background: #fff;
    display: block;
    width: 9.057937rem;
    height: 2.264325rem;
    border: 1px solid #11b57c;
    color: #11b57c;
    font-size: 0.943538rem;
    line-height: 2.264325rem;
    border-radius: 0.2rem;
    margin: 2.19rem auto;
    padding: -0.5rem 0;
    box-sizing: border-box;
    text-align: center;
  }
}
</style>